﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <script type="text/javascript" src="../Assets/CanvasHeatMaps.js"></script>

    <script type="text/javascript">
        var heatmap = null, state, data;

        var imageObj = new Image();
        imageObj.src = '../Assets/alphaMask.png';

        function LoadHeatMap(options) {
            var o = eval('(' + options + ')');
            o.callback = function (imgUri) {
                window.external.notify(imgUri);
            };

            //creates and initializes the heatmap
            heatmap = new CanvasHeatmap(heatmapArea, imageObj, o);
        }

        function Resize(width, height) {
            var mapDiv = document.getElementById("heatmapArea");

            mapDiv.style.width = width + "px";
            mapDiv.style.height = height + "px";
            mapDiv.width = width;
            mapDiv.height = height;
            if (heatmap && state) {
                heatmap.Render(null, state);
            }
        }

        function SetOptions(options) {
            if (heatmap) {
                var o = eval('('+options+')');
                heatmap.Render(null, o);
            }
        }

        //points = x,y|x1,y1...
        function Render(points, radius, zoom) {
            state = { 'radius': parseInt(radius), 'zoom': parseFloat(zoom)};

            if(heatmap){
                heatmap.Render(points, state);
            }
        }

        function TerminateWorker() {
            if (heatmap) {
                heatmap.TerminateWorker();
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            background-color:transparent;
        }

        #heatmapArea {
            position: relative;
            float: left;
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <canvas id="heatmapArea" />
</body>
</html>